<template>
    <div class="socket">
        <h4>socket连接测试</h4>
        <el-input placeholder="输入账号信息" v-model="user"></el-input>
        <el-button size="small" type="primary" @click="doLogin">立即登录</el-button>
        <el-divider>
           
        </el-divider>
    </div>
</template>
<script setup>
import WebsocketClient from "@/utils/WebsocketClient.js";
import { Message } from "@element-plus/icons-vue";
import { getCurrentInstance, ref } from "vue";

let user = ref(null);
let isOnline = ref(false);
let message = ref(null);
let ws = ref(null);

const { proxy } = getCurrentInstance();

const doLogin = () => {
    if (!user.value) {
        proxy.$message({
            type: "error",
            message: "用户名为空"
        })
    }

    ws = new WebsocketClient({ url: "Ws://localhost:9008/ws/" + user.value });

    ws.onopen(() => {
        sessionStorage.setItem("user", user.value);
        isOnline.value = true;
    })

    ws.onmessage((data) => {
        console.log("接受消息", data.data);
    })

    ws.onclose(() => {
        isOnline.value = false;
    })

    ws.connect();
}

</script>
<style lang="scss" scoped>
#map {
    width: 100%;
    height: 60vw;
}
</style>